/**
 * 学习目标： JSX 语法糖： React.createElement() 语法糖
 */

import React from 'react'
import ReactDOM from 'react-dom'

// 💥 类属性需要写成 className ，class 在浏览器会有警告
// const divNode = React.createElement('div', { id: 'box', className: 'box' }, '这是一个 react 案例')
// ReactDOM.render(divNode, document.getElementById('root'))

// 底层语法创建虚拟DOM React.createElement()
const list1 = React.createElement('ul', { className: 'list' }, [
  React.createElement('li', { key: 0 }, '香蕉'),
  React.createElement('li', { key: 1 }, '橘子'),
  React.createElement('li', { key: 2 }, '苹果'),
])

// JSX语法糖 => 通过 babel插件 => 转化成JS能识别的语法 React.createElement()
const list2 = (
  <div>
    <ul>
      <li id='aa'>香蕉</li>
      <li>橘子</li>
      <li>苹果</li>
    </ul>
    <ul>
      <li>香蕉</li>
      <li>橘子</li>
      <li>苹果</li>
    </ul>
  </div>
)

console.log('虚拟DOM1', list1)
console.log('虚拟DOM2', list2)

ReactDOM.render(list2, document.getElementById('root'))
